<template>
  <div class="register-container">
    <!-- 注册模块 -->
    <div class="register-body">
      <!-- 用户名 -->
      <div class="username-box">
        <span>*</span>
        <label for="username" class="username-txt">账号</label>
      </div>
      <el-input id="username" placeholder="请输入登录名" v-model="username"></el-input>
      <!-- 密码 -->
      <div class="pwd-box">
        <span>*</span>
        <label for="pwd" class="pwd-txt">密码</label>
      </div>
      <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
      <!-- 注册按钮 -->
      <el-button type="primary" class="register-btn" @click="register">注册</el-button>
      <b class="clearfix"></b>
      <!-- 底部 -->
      <footer class="login-footer">
        <p class="footer-b">QQ:100861162</p>
        <p class="footer-b">湘ICP备19027633号</p>
      </footer>
    </div>
  </div>
</template>

<script>
import { registerApi } from '@/logrequest/api'
export default {
  name: 'login',
  data() {
    return {
      username: '', // 用户名
      password: '' // 密码
    }
  },
  watch: {},
  methods: {
    register() {
      registerApi({ username: this.username, password: this.password }).then(({ data: res }) => {
        if (res.status === 200) {
          this.$store.commit('openTitle', '注册成功!')
          this.$store.dispatch('ToggleTitle')
          this.$emit('openLogin')
        } else {
          this.$store.commit('openTitle', res.message)
          this.$store.dispatch('ToggleTitle')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.register-container {
  padding-top: 35px;
  .register-body {
    width: 70%;
    margin: auto;
    .phone-box,
    .username-box,
    .pwd-box {
      line-height: 70px;
      span {
        color: #f8836c;
        margin-right: 3px;
      }
      .phone-number-txt,
      .username-txt,
      .pwd-txt {
        color: #606266;
        font-size: 15px;
      }
    }
    .register-btn {
      margin-top: 30px;
      display: block;
      width: 100%;
      float: right;
    }
    .login-footer {
      clear: both;
      padding-top: 22px;
      .footer-b {
        text-align: center;
        font-size: 12px;
        line-height: 15px;
      }
    }
  }
}
</style>